<style scoped>
.editor{text-align: justify;}

._goods_info_{padding: 4px 8px;}
.price{color: #ff9200;font-size: 1.6em;font-weight: bold;margin-right: 5px;}
.price::before{content: '￥';font-size: 0.6em;}
.price>.bg{font-size: 1.6em;}
.del_price{color: #999;}
.stock-sales-quota{font-size: 0.8em;color: #999;}
</style>
<template>
  <div class="info-outer">
    <HeaderSlot>
      <van-nav-bar :title="$t(this_action.label)" left-arrow @click-left="href_handle(-1)" />
    </HeaderSlot>
    <form_param :config="form_config">
      <template #_goods_info_="row">
        <div class="_goods_info_">
          <div class="flex" style="justify-content: space-between;">
            <div class="flex">
              <p class="price">{{row.value.price}}</p>
              <van-tag type="primary" v-if="(model.switch_price_vip)&&'price_vip' in row.value">会员：{{row.value.price_vip>0?row.value.price_vip:'免费'}}</van-tag>
            </div>
            <p class="del_price"><del v-if="row.value.del_price">{{row.value.del_price}}</del></p>
          </div>
          <div class="title">
            <h2>{{row.value.title}}</h2>
            <p class="tips" v-show="row.value.tips">{{row.value.tips}}</p>
          </div>

          <div class="sku" v-if="(model.switch_price_sku)">

          </div>
          <div class="stock-sales-quota flex" style="justify-content: space-around;">
            <p v-if="row.value.quota>0">限购：{{row.value.quota}}</p>
            <p v-if="row.value.sales">销量：{{row.value.sales}}</p>
            <p v-if="row.value.stock">库存：{{row.value.stock}}</p>
          </div>
        </div>
      </template>
      <template #file_imgs="row">
        <van-swipe v-if="row.value" indicator-color="white">
          <van-swipe-item v-for="v in row.value.split(',')">
            <template v-if="v"><img-referrer class="img" style="width: 100%;" :src="_href(v)"/></template>
          </van-swipe-item>
        </van-swipe>
      </template>
      <template #file_img="row">
        <img-referrer class="img" style="width: 100%;" :src="_href(row.value)"/>
      </template>
      <template #editor="row">
        <div class="editor" v-html="row.value"></div>
      </template>
    </form_param>
  </div>
  <FooterSlot>
    <BuyMenu show_add_cart :title="info.title" :head_img="info.head_img" :id="info.id" :model_name="model.name"></BuyMenu>
  </FooterSlot>
</template>

<script>
import {_href} from "@/js/s94_tool.js";
import form_param from "@/components/form_param.vue";
import {ajax} from "@/js/api_tool.js";
import {S94Model} from "@/js/S94Model.js";
import FooterSlot from "@/components/slot/FooterSlot.vue";
import BuyMenu from "@/components/card/BuyMenu.vue";
import {_get, href_handle} from "@/vue_plugin/router_auto.js";
import tool from "@/js/tool.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";
import HeaderSlot from "@/components/slot/HeaderSlot.vue";
export default {
  components: {HeaderSlot, ImgReferrer, BuyMenu, FooterSlot, form_param},
  props: {
    model: Object,
    this_action: Object,
  },
  data(){
    let id = _get("id",0);
    return {
      id: id,
      form_config: [],
      info: {},

      cart_row: {
        sku_id: 0,
        additional_select: {},
        num: 1,
      },

      sku_group:[],
      sku_list:[],

      additional_group: [],
      additional_list: [],

      cart: (new S94Model(this.model)).cart(),
      cart_count: 0,
    }
  },
  methods:{
    href_handle,
    _href: _href,
    is_component(type){
      return !!~Object.keys(this.$options.components).indexOf(type);
    },
    to_cart(){
      this.cart.to_index();
    },
    add_cart(){
      this.buy_before().then(()=>{
        let data = Object.assign({}, this.cart);
        delete data.cart_items;
        data.link_id = this.id;
        data.sku_id = this.cart_row.sku_id;
        data.additional_select = this.cart_row.additional_select;
        ajax({url:'/home/cart/add', data:data}, (res)=>{
          this.cart_count = res.data.sum_num;
        })
      })
    },
    buy(){
      this.buy_before().then(()=>{
        let cart_row = this.cart_row;
        cart_row.link_id = this.id;
        if (!cart_row.title) cart_row.title = this.info.title;
        if (!cart_row.head_img) cart_row.head_img = this.info.head_img;
        if (!cart_row.price) cart_row.price = this.info.price;
        this.cart.add_item(cart_row).to_buy();
      })
    },
    init(){
      if (this.id<=0) return;
      // 规格-加购项 初始化
      ajax(`/home/index/sku_additional?model_name=${this.model.name}&id=${this.id}`, res=>{
        this.sku_group = res.data.sku_group || [];
        this.sku_list = res.data.sku_list || [];
        this.additional_group = res.data.additional_group || [];
        this.additional_list = res.data.additional_list || [];
      })
    },
    buy_before(){
      let app = this;
      return this.sku_select().then(()=>{
        return new Promise(resolve => {
          if (!this.additional_list.length) return resolve();
          tool.select_additional(this.additional_list, this.additional_group, this.cart_row.additional_select).then((additional_select)=>{
            this.cart_row.additional_select = additional_select;
            resolve();
          })
        })
      })
    },
    sku_select(){
      let app = this;
      return new Promise(resolve => {
        if (!this.sku_list.length) return resolve();

        tool.select_sku(this.sku_group, this.sku_list, this.model.switch_stock, this.cart_row.sku_id, this.cart_row.num).then((sku)=>{
          this.cart_row.sku_id = sku.id;
          this.cart_row.num = sku.num;
          this.cart_row.price = sku.price;
          this.cart_row.title = sku.title;
          this.cart_row.head_img = sku.head_img;
          resolve();
        });
      })
    }
  },
  computed:{
  },
  mounted(){
    this.init();
    let group_config = [
      {type:"_goods_info_", value: {}, include_name:["title","tips","quota","sales","stock","price","price_vip","del_price"]}
    ];
    let url = `/home/${this.model.name}/${this.this_action.action}?id=${this.id}&_is_init_=1`;
    ajax(url, (res)=>{
      let extend_config = {};
      if (this.this_action.type === 'info') extend_config.is_info = true;
      this.form_config = [];
      Object.values(res.data).forEach((row)=>{
        this.info[row.name] = row.value;
        Object.assign(row, extend_config);
        let in_group = group_config.some((gc_row)=>{
          if (~gc_row.include_name.indexOf(row.name)){
            gc_row.value[row.name] = row.value;
            if (Object.keys(gc_row.value).length<=1) { //第一次遇到属于gc_row的参数时，把gc_row加入到form_config
              this.form_config.push(gc_row);
            }
            return true;
          }
        })
        if (!in_group) this.form_config.push(row);
      });
    })
  }
}
</script>